<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/documentMyReady.js"></script>
    <style>
        .bg-1 {
            background-color: blueviolet;
        }
        .bg-2{
            background-color: burlywood;
        }
        .bg-3{
            background-color: yellowgreen;
        }
        .bg-4{
            background-color: tomato;
        }
        .tab{
            width: 600px;
            margin: 0 auto;          
        }
        .tab ul.tab-head{
            display: flex;
            justify-content: space-between;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        .tab ul.tab-head li{
            text-align: center;
            flex-basis: 200px;
            margin: 0 2px 5px 2px;
            line-height: 2;
            color: #ffffff;
            cursor: pointer;
        }
        .tab ul.tab-head li:first-child{
            margin-left: 0;
        }
        .tab ul.tab-head li:last-child{
            margin-right: 0;
        }
        .tab ul.tab-head li:hover{
            color:rgba(255, 255, 255, 0.5)
        }
        .tab .tab-content{
            height: 400px;
            padding: 20px 10px;
            text-indent: 2em;
            line-height: 2;
            color: #ffffff;
        }
        .tab .tab-content div{
            display: none;
            overflow: hidden;
        }
        .tab .tab-content div.active{
            display: block;
        }
    </style>
    <script>
        document.myReady(function(){
            "use strict";
            var liDom = document.getElementsByClassName('tab-head')[0].children;
            var liDomLen = liDom.length;
            var divTabDom = document.getElementsByClassName('tab-content')[0].children;
            //获取外部容器里面的className
            var divContentClassNameStr = document.getElementsByClassName('tab-content')[0].className;
            //init
            function init(){
                liDom[0].style.marginBottom = '0px';
                document.getElementsByClassName('tab-content')[0].classList.add(liDom[0].className);
            }
            //change
            function change(){
                for(let i = 0; i < liDomLen; i ++){  
                    let funTab = function(){
                        //遍历每一个div里面有没有active属性,如果有则去除，并且设置每一个div的margin-bottom
                        for(let i = 0; i < liDomLen; i ++){
                            if(divTabDom[i].classList.contains('active')){                              
                                divTabDom[i].classList.remove('active');
                            }
                            liDom[i].style.marginBottom = '5px';
                        //设置外部容器里面的class 为原始calss,以免切换的时候class乱了
                            document.getElementsByClassName('tab-content')[0].className = divContentClassNameStr;   
                        }
                        //增加所选择的class的 属性为active,将外部容器的class设置为和选择的li一样的背景颜色
                        divTabDom[i].classList.add('active');
                        document.getElementsByClassName('tab-content')[0].classList.add(liDom[i].className);
                        //设置所选择的li的margin-bottom=0
                        liDom[i].style.marginBottom = '0px';
                    }
                    liDom[i].addEventListener('click', funTab, false);
                }
            }
            init();
            change();
        });
    </script>
</head>
<body>
    <div class="tab">
        <ul class="tab-head">
            <li class="bg-1">HTML/CSS</li>
            <li class="bg-2">JAVASCRIPT</li>
            <li class="bg-3">AJAX</li>
            <li class="bg-4">SERVER</li>
        </ul>
        <div class="tab-content">
            <div class="active">
                <h1>checkboxObject</h1>
                <p> checkboxObject.checked=true|false说明该属性保存了 checkbox 的当前状态，不管何时，这个值发生变化的时候，onclick 事件句柄就会触发（也可能触发 onchange 事件句柄）。</p>
            </div>
            <div>
                <h1>使用滤镜跟rgba透明颜色实现</h1>
                <p>③使用滤镜跟rgba透明颜色实现。(目前使用) 优点:不会有多余的标签。兼容性也可以...分类: CSS 标签: sass, css, 背景透明, 文字不透明, 滤镜</p>
            </div>
            <div>
                <h1>白色并且阿尔法通道是0.9</h1>
                <p>div: background-color: rgba(255, 255, 255, 0.9); /* 白色并且阿尔法通道是0.9*/ 内层div: background-color: #FFF; /*背景色是白色, </p>
            </div>
            <div>
                <h1>tml/Css标签透明度效果的实现</h1>
                <p> - Html/Css标签透明度效果的实现,在html中,实现半透明背景,在HTML Div+Css编程中,为了实现版透明,通常有3中做法。 第一种是HTML5的透明,在H5中支持透明</p>
            </div>
        </div>
    </div>
</body>
</html>